<template>
	<view>
		<navigationbar :title="title"></navigationbar>
		<view class="container">
			<view class="content">
				<view class="userName" @click="toUserInfo">
					<view class="left">
						<text>{{info.nickname}}</text>
						<text>{{info.years}}·应届生·{{info.birthday | toAge}}岁·{{info.educate_info.education}}</text>
					</view>
					<image :src="info.avatar" mode=""></image>
				</view>
				<view class="introduction">
					<view class="title">
						<text>个人简介</text>
						<text class="iconfont icon-bianji"></text>
					</view>
					<view class="introContent">
						<text>{{info.content}}</text>
					</view>
				</view>
				<view class="status" @click="editStatus">
					<text>求职状态</text>
					<text>{{info.status}}</text>
				</view>
				<view class="educate" @click="editEdu">
					<view class="title">
						<text>教育经历</text>
						<text class="iconfont icon-bianji"></text>
					</view>
					<view class="dataContent">
						<view v-if="info.educate_info">
							<view class="top">
								<text>{{info.educate_info.schoolname}}</text>
								<text>{{info.educate_info.time}}</text>
							</view>
							<view class="bottom">
								<text>{{info.educate_info.specialized}}</text>
								<text>{{info.educate_info.education}}</text>
							</view>
						</view>
						<view v-else>
							<view class="top">
								<text>暂无</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 求职状态 -->
		<u-picker :show="show" :columns="columns" @confirm="confirm" @cancel="cancel"></u-picker>
	</view>
</template>

<script>
import navigationbar from '../navigationBar.vue';
export default {
	components: {
		navigationbar
	},
	data() {
		return {
			show: false,
			title: '在线信息',
			columns: [['离校-随时到岗','在校-在看机会','在校-暂不考虑']],
			info: {
				nickname:'',
				years: '22年',
				birthday: '1999',
				content: '暂未填写',
				status: '在校-暂不考虑',
				educate_info: {
					schoolname: '',
					education: '',
					specialized: '',
					time: ''
				}
			}
		};
	},
	onShow() {
		this.info = Object.assign(this.info, this.$store.state.userInfo)
	},
	filters:{
		toAge: function(value) {
			let myDate = new Date()
			let year = myDate.getFullYear()
			value = +value.substr(0,4)
			return (year-value)
		}
	},
	methods:{
		confirm(data){
			this.info.status = data.value[0]
			this.show = false
		},
		cancel(){
			this.show = false
		},
		editStatus() {
			this.show = true
			
		},
		toUserInfo() {
			uni.navigateTo({
				url:'userInfo/userInfo'
			})
		},
		editEdu() {
			uni.navigateTo({
				url: 'educate/educate'
			})
		}
	}
};
</script>

<style lang="scss">
	$color: #dddddd;
	.container {
		width: 100%;
		.content {
			width: 90%;
			margin: 0 auto;
			.userName {
				display: flex;
				flex-flow: row;
				padding: 40rpx 0;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1rpx solid $color;
				.left {
					text {
						display: block;
					}
					& text:nth-of-type(1) {
						margin-bottom: 15rpx;
						font-size: 60rpx;
					}
				}
				image {
					width: 160rpx;
					height: 160rpx;
					border-radius: 80rpx;
				}
			}
			.introduction,.educate {
				padding: 50rpx 0;
				border-bottom: 1rpx solid $color;
				.title {
					display: flex;
					flex-flow: row;
					justify-content: space-between;
					font-size: 40rpx;
					align-items: center;
				}
				.introContent {
					white-space: pre-wrap;
					line-height: 60rpx;
					margin-top: 30rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
				.dataContent {
					margin-top: 30rpx;
					.top {
						display: flex;
						flex-flow: row;
						justify-content: space-between;
						align-items: center;
						& text:first-of-type {
							font-size: 40rpx;
						}
					}
					.bottom {
						margin-top: 10rpx;
						text{
							margin-right: 30rpx;
						}
					}
				}
			}
			.status {
				padding: 50rpx 0;
				border-bottom: 1rpx solid $color;
				display: flex;
				flex-flow: row;
				justify-content: space-between;
				align-items: center;
				& text:first-of-type {
					font-size: 40rpx;
				}
			}
		}
	}
</style>
